<template>
  <div class="first">
    <div class="header">
      <div class="title">
        俯瞰 OVERLOOK
        <el-button type="primary" @click="gotoHome" class="toHomeButton"
          >退出登录</el-button
        >
      </div>
    </div>
    <div class="line"></div>
    <el-container>
      <el-aside>
        <el-menu
          class="el-menu-vertical-demo"
          default-active="/index"
          router="true"
        >
          <el-menu-item index="/index">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-menu"></i>
              <span slot="title">图像拼接建图</span>
            </div>
          </el-menu-item>
          <el-menu-item index="/checkphoto">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-menu"></i>
              <span slot="title">图像控制点精校正</span>
            </div>
          </el-menu-item>

          <el-menu-item index="3">
            <div style="text-align: left; margin-left: 20px">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </div>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main> </el-main>
    </el-container>
  </div>

  <el-form :model="form">
    <input id="file" type="file" name="image" multiple="multiple" />

    <el-form-item label="上传图片" :label-width="formLabelWidth">
      <el-upload
        ref="upload"
        action="http://10.132.20.24:3000/task/new"
        accept="image/png,image/gif,image/jpg,image/jpeg"
        list-type="picture-card"
        :limit="limitNum"
        :auto-upload="false"
        :on-exceed="handleExceed"
        :before-upload="handleBeforeUpload"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </el-form-item>
    <el-form-item>
      <el-button size="small" type="primary" @click="uploadFile"
        >立即上传</el-button
      >
      <el-button size="small">取消</el-button>
    </el-form-item>
  </el-form>

  <el-upload
    action="#"
    :auto-upload="false"
    multiple
    @change.native="getFile2($event)"
  >
    <!-- <i slot="default" class="el-icon-plus" /> -->
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="file" slot-scope="{ file }">
      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in" />
        </span>
        <!--                <span-->
        <!--                  v-if="!disabled"-->
        <!--                  class="el-upload-list__item-delete"-->
        <!--                  @click="handleDownload(file)"-->
        <!--                >-->
        <!--                  <i class="el-icon-download"/>-->
        <!--                </span>-->
        <!--                <span-->
        <!--                  v-if="!disabled"-->
        <!--                  class="el-upload-list__item-delete"-->
        <!--                  @click="handleRemove(file)"-->
        <!--                >-->
        <!--                  <i class="el-icon-delete"/>-->
        <!--                </span>-->
      </span>
    </div>
  </el-upload>
  <el-upload action="#" :auto-upload="false" multiple id="img">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
  <el-upload action="#" :auto-upload="false" multiple id="txt">
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      formLabelWidth: "80px",
      limitNum: 3,
      form: {},
    };
  },
  methods: {
    // 上传文件之前的钩子
    handleBeforeUpload(file) {
      console.log("before");
      if (
        !(
          file.type === "image/png" ||
          file.type === "image/gif" ||
          file.type === "image/jpg" ||
          file.type === "image/jpeg"
        )
      ) {
        this.$notify.warning({
          title: "警告",
          message:
            "请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片",
        });
      }
      let size = file.size / 1024 / 1024 / 2;
      if (size > 2) {
        this.$notify.warning({
          title: "警告",
          message: "图片大小必须小于2M",
        });
      }
    },

    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    uploadFile() {
      var files = document.getElementById("file").files;
      console.log(files);

      var images = new FormData();

      for (var i = 0; i < files.length; i++) {
        images.append("images", files[i]);
      }

      console.log(images);

      axios
        .post("http://10.132.20.24:3000/task/new", images)
        .then(function (response) {
          //成功时服务器返回 response 数据
          alert(response.data);
        })
        .catch(function (error) {
          console.log(error);
        });

      console.log(this.fileList);
      this.$refs.upload.submit();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>